<mat-card>Add task</mat-card>
<div class="container">
  <mat-spinner *ngIf="!(areAssigneesLoaded || areTasksLoaded)"></mat-spinner>
  <div *ngIf="(areAssigneesLoaded || areTasksLoaded)" [formGroup]="form">

    <mat-form-field>
      <mat-label>Name</mat-label>
      <input matInput placeholder="Name" name="name" formControlName="name" required>
      <mat-error *ngIf="name.invalid">{{getErrorName()}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Estimated time</mat-label>
      <input matInput placeholder="Estimated time (in minutes)" name="estimatedTime" formControlName="estimatedTime"
             type="number" required>
      <mat-error *ngIf="estimatedTime.invalid">{{getErrorEstimatedTime()}}</mat-error>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Deadline</mat-label>
      <input matInput type="datetime-local" name="deadline" formControlName="deadline" required>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Type</mat-label>
      <mat-select placeholder="Type" formControlName="type" name="type" required>
        <mat-option *ngFor="let t of types" [value]="t">
          {{t | titlecase}}
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Preceding tasks</mat-label>
      <mat-select placeholder="Preceding tasks" formControlName="precedingTaskIds" name="precedingTaskIds" multiple>
        <mat-option *ngFor="let p of precedingTasks" [value]="p.id">
          {{p.id}} {{p.name}} ({{p.category | enumeration}})
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Assignee</mat-label>
      <mat-select placeholder="Assignee" formControlName="assigneeId" name="assigneeId">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let a of assignees" [value]="a.id">
          {{a.firstName}} {{a.lastName}} ({{a.role | enumeration}})
        </mat-option>
      </mat-select>
    </mat-form-field>

    <mat-form-field>
      <mat-label>Scheduled time</mat-label>
      <input matInput type="datetime-local" name="scheduledTime" formControlName="scheduledTime">
    </mat-form-field>

    <mat-form-field>
      <mat-label>Details</mat-label>
      <input matInput placeholder="Details" name="details" formControlName="details">
      <mat-error *ngIf="details.invalid">{{getErrorDetails()}}</mat-error>
    </mat-form-field>

    <button mat-raised-button (click)="submitForm()" [disabled]="form.invalid">Add task</button>

  </div>
</div>
